<template>
  <div class="body">
    <div class="main">
      <div class="product" v-for="(product, index) in products">
        <image class="cover" :src="product.cover" mode="aspectFill"></image>
        <div class="info">
          <div class="title">{{ product.name }}</div>
          <div class="description">{{ product.description }}</div>

          <view class="price-addbtn">
            <view class="price">{{ "￥" + product.price }}</view>

            <!-- <div class="count">{{ product.count }}</div> -->
            <uni-icons
              type="plus"
              size="25"
              color="#10AEFF"
              @click="pushToCert(product)"
            ></uni-icons>
          </view>
        </div>
      </div>
    </div>
    <Cert ref="cert" @settle="goback"></Cert>
  </div>
</template>
<script lang="ts">
import { listProduct } from "@/api/product";
import { Product, searchVO } from "@/typings";
import Vue from "vue";
import Cert from "@/components/cert/cert.vue";

export default Vue.extend({
  components: { Cert },
  data() {
    return {
      products: [] as Product[],
      searchVO: {
        pageNum: 1,
        pageSize: 10,
      } as searchVO,
      finish: false,
      type: "",
    };
  },
  onLoad(ops: any) {
    this.type = ops.type;
    this.loadProducts();
  },
  methods: {
    goback(products: Product[]) {
      if (this.type == "home") {
        uni.navigateTo({
          url: "/pages/letter/product-letter",
          success: (res) => {
            res.eventChannel.emit("productsSelect", products);
          },
        });
      } else {
        let that: any = this;
        const eventChannel = that.getOpenerEventChannel();
        eventChannel.emit("productsSelect", products);
        uni.navigateBack({});
      }
    },
    loadProducts() {
      if (!this.finish) {
        listProduct(this.searchVO).then((res) => {
          if (res.pageSize > res.size) {
            this.finish = true;
          }
          this.searchVO.pageNum++;
          res.list.forEach((el: Product) => {
            el.count = 0;
            el.checked = false;
          });
          this.products.push(...res.list);
        });
      }
    },
    pushToCert(product: Product) {
      let cert = this.$refs.cert as any;
      cert.pushToCert(product);
    },
  },
  onReachBottom() {
    this.loadProducts();
  },
});
</script>
<style lang="scss" scoped>
.body {
  background-color: #f7f7f7;
  padding-bottom: 200rpx;
}
.main {
  border-radius: 15rpx;
  margin: 0 20rpx;
  padding: 20rpx;
  .product {
    background-color: white;
    box-shadow: 1rpx 1rpx 10rpx 10rpx rgba($color: #000000, $alpha: 0.02);
    border-radius: 15rpx;
    display: flex;
    align-items: flex-start;
    padding: 20rpx;
    margin-top: 20rpx;
    .cover {
      flex-shrink: 0;
      width: 140rpx;
      height: 140rpx;
      border-radius: 15rpx;
    }
    .info {
      display: flex;
      flex-direction: column;
      width: 100%;
      margin-left: 20rpx;
      .title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: rgba($color: #000000, $alpha: 0.9);
      }
      .description {
        margin-top: 10rpx;
        font-size: 28rpx;
        color: rgba($color: #000000, $alpha: 0.5);
      }
      .price-addbtn {
        .price {
          font-weight: bold;
          font-size: 30rpx;
          color: rgb(250, 81, 81);
        }
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10rpx;
        width: 100%;
        .count {
          margin: 0 20rpx;
        }
      }
    }
  }
}
</style>
<style lang="scss">
page {
  background-color: #f7f7f7;
}
</style>
